<template>
  <div>
    这是一个子组件abc:{{ abc }}
    <br>
    这个是cbd的值: {{ cbd }}
    <br>
    <button @click="hClick">修改abc的值： 点击Add + 1</button>
    <button @click="hCbd">修改cbd的值： 点击Add + 1</button>
  </div>

</template>

<script>
export default {
  props: {
    abc: {
      type: Number,
      required: true
    },
    cbd: {
      type: Number,
      required: true
    }
  },
  methods: {
    hClick() {
      // 不能直接在子组件中修改父组件的值 props
      // this.value++
      // this.value = this.value + 1
      // 通知父组件，让父组件来修改 this.$emit('父组件中的事件',修改的值)
      this.$emit('update:abc', this.abc + 1)
    },
    hCbd() {
      this.$emit('update:cbd', this.cbd + 1)
    }
  }
}
</script>

<style>

</style>
